<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚合报告</title>
    <style>
        body {
            display: flex;
            margin: 0;
            font-family: Arial, sans-serif;
            min-height: 100vh; /* 确保页面高度至少为视口高度 */
        }
        #sidebar {
            width: 200px;
            background-color: #333;
            color: white;
            display: flex;
            flex-direction: column; /* 垂直排列菜单项 */
            justify-content: flex-start; /* 从顶部开始排列 */
            transition: width 0.3s ease; /* 侧边栏宽度变化的过渡效果 */
        }
        #sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #sidebar li {
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease; /* 背景颜色变化的过渡效果 */
            border-bottom: 1px solid #555; /* 添加分割线样式 */
        }
        #sidebar li:last-child {
            border-bottom: none; /* 移除最后一个菜单项的分割线 */
        }
        #sidebar li:hover {
            background-color: #555;
        }
        /* 定义选中样式 */
        #sidebar li.active {
            background-color: #007BFF;
        }
        #content {
            flex: 1;
            padding: 20px;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 页面加载完成后，默认选中第一个菜单项
            const firstMenuItem = document.querySelector('#sidebar li');
            firstMenuItem.classList.add('active');
            // 加载第一个菜单项对应的页面
            const firstPageUrl = firstMenuItem.getAttribute('data-url');
            const iframe = document.getElementById('report-iframe');
            iframe.src = firstPageUrl;
        });

        function loadPage(liElement) {
            // 移除所有菜单项的选中样式
            const menuItems = document.querySelectorAll('#sidebar li');
            menuItems.forEach(item => {
                item.classList.remove('active');
            });
            // 给当前点击的菜单项添加选中样式
            liElement.classList.add('active');
            const pageUrl = liElement.getAttribute('data-url');
            const iframe = document.getElementById('report-iframe');
            iframe.src = pageUrl;
        }
    </script>
</head>
<body>
<div id="sidebar">
    <ul>
        <li data-url="grap_report.html" onclick="loadPage(this)">存储检查</li>
        <li data-url="ip_error_report.html" onclick="loadPage(this)">ssh登录检查</li>
        <li data-url="nginx_access_exception.html" onclick="loadPage(this)">nginx异常访问</li>
        <li data-url="process_report.html" onclick="loadPage(this)">进程记录</li>
    </ul>
</div>
<div id="content">
    <iframe id="report-iframe" src=""></iframe>
</div>
</body>
</html>
